import React, { useState, useEffect } from "react";
import { Row, Col, Menu } from "antd";
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import  servicePath  from '../config/apiUrl'

import { HomeOutlined, SendOutlined, MehOutlined } from "@ant-design/icons";

const Header = () => {
  const [navArray , setNavArray] = useState([])
  const getTypeInfo = async () => {
    const { data } = await axios(servicePath.getTypeInfo)
    setNavArray(data.data)
  }
  // 跳转文章列表页
  const handleClick = (e)=>{
    if(e.key==0){
      Router.push('/index')
    }else{
      Router.push('/list?id='+e.key)
    }
  }

  useEffect(() => {
    getTypeInfo()
  })
  return (
    <div className="header">
      <Row type="flex" justify="center">
        <Col xs={24} sm={24} md={10} lg={10} xl={10}>
          <span className="header-logo">pixel</span>
          <span className="header-txt">专注前端开发</span>
        </Col>

        <Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
          <Menu mode="horizontal" onClick={handleClick}>
            <Menu.Item key="home">
              <HomeOutlined />
              首页
            </Menu.Item>
            {
              navArray.map((item)=>{
                return(
                  <Menu.Item key={item.id}>
                    {/* <SendOutlined /> */}
                    {item.type_name}
                  </Menu.Item>
                )
              }) 
            }
          </Menu>
        </Col>
      </Row>
    </div>
  );
}

export default Header;
